<template>
  <div
    style="margin-top: 10px"
    v-for="(item, index) in noticeList"
    :key="index"
  >
    <div
      style="display: flex; justify-content: space-between; align-items: center"
    >
      <div style="display: flex; align-items: center">
        <div style="margin-right: 15px">
          <el-tag
            size="large"
            style="color: #fff"
            :color="item.status === 'READ' ? '#409EFF' : '#E6A23C'"
            >{{ item.title }}</el-tag
          >
        </div>
        <div style="width: 700px">
          <el-link @click="handleUpdate(item.id)" :underline="false">
            <p
              class="text-ellipsis"
              :style="{ color: item.status === 'READ' ? '#C0C4CC' : '#606266' }"
            >
              {{ item.content }}
            </p>
          </el-link>
        </div>
      </div>
      <div style="display: flex; align-items: center">
        <div style="margin-right: 50px; font-size: 14.5px; color: #606266">
          {{ item.createTime }}
        </div>
        <div>
          <el-space :size="10">
            <el-tooltip
              effect="dark"
              :content="item.status === 'READ' ? '设为未读' : '设为已读'"
              placement="left-start"
            >
              <el-icon
                @click="handleUpdate(item.id)"
                style="padding: 10px; color: #337ecc"
                ><Edit
              /></el-icon>
            </el-tooltip>

            <el-icon
              @click="handleDelete(item.id)"
              style="padding: 10px; color: #c45656"
              ><Delete
            /></el-icon>
          </el-space>
        </div>
      </div>
    </div>
    <el-divider class="my_divider" ::v-deep="$attrs"></el-divider>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { queryAll, update, remove } from "@/api/notice";
import $bus from "@/bus/index.js";
onMounted(() => {
  getAllNotice();

  //第一个参数：即为事件类型；第二个参数：即为事件回调
  $bus.on("all", (notice) => {
    getAllNotice();
  });
});

//查询所有通知方法
const noticeList = ref([]);
const getAllNotice = () => {
  queryAll().then((res) => {
    if (res.code === 200 && res.data !== null) {
      noticeList.value = res.data;
    }
  });
};

const handleUpdate = (id) => {
  update(id).then((res) => {
    if (res.code === 200) {
      getAllNotice();
    }
  });
};

const handleDelete = (id) => {
  ElMessageBox.confirm("确认删除此通知？", "删除通知", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      //删除逻辑
      remove(id).then((res) => {
        if (res.code === 200) {
          getAllNotice();
          ElMessage({
            type: "success",
            message: "删除成功",
          });
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};
</script>

<style scoped>
.my_divider {
  margin: 16px 0 16px 0;
}

.text-ellipsis {
  border: none;
  font-size: 14.5px;
  color: #606266;
  width: 700px; /* 设置文本宽度 */
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 隐藏超出容器的部分 */
  text-overflow: ellipsis; /* 使用省略号表示被隐藏的文字 */
}

.text-ellipsis:hover {
  overflow: visible; /* 在鼠标悬停时显示被隐藏的文字 */
  white-space: normal; /* 在鼠标悬停时允许文字换行 */
}
</style>
